<template>
  <view class="mylogin">
    <!-- 图标 -->
    <uni-icons class="myicon" type="contact-filled" size="100" color="#afafaf"></uni-icons>
    <!-- 登录按钮 -->
    <button open-type="getUserInfo" @getuserinfo="getuserinfo" class="mybtn">一键登录</button>
    <!-- 登录提示文本 -->
    <text class="mytxt">登录后尽享更多权益</text>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: "mylogin",
    computed: {
      ...mapState('user', ['redirectInfo'])
    },
    methods: {
      ...mapMutations('user', ['setUserInfo', 'setToken']),
      // 获取用户信息
      getuserinfo(e) {
        // 判断获取信息是否成功
        if (e.detail.errMsg !== 'getUserInfo:ok') return uni.$showMsg('获取信息失败')
        // 保存用户信息
        this.setUserInfo(e.detail.userInfo)
        // 调用获取 token 的方法
        this.getToken(e.detail)
      },
      // 获取 token 
      async getToken(info) {
        const [err, res] = await uni.login()
        if (res.errMsg !== 'login:ok') return uni.$showMsg('登录失败')
        // 定义获取 token 的参数对象
        let query = {
          encryptedData: info.encryptedData,
          rawData: info.rawData,
          iv: info.iv,
          signature: info.signature,
          code: res.code
        }
        // 发送请求
        let {
          data: tokenRes
        } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
        // if (tokenRes.meta.status !== 200) return uni.$showMsg()
        this.setToken(tokenRes.message.token)
        // 提示登录成功
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        // 调用一个跳转的方法
        this.navgateback()
      },
      // 判断是否跳转跨上一个页面
      navgateback() {
        // 判断 redirectInfo
        if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
          // 说明需要返回上一个页面
          uni.switchTab({
            url: this.redirectInfo.from
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .mylogin {
    text-align: center;
    padding: 0 20px;
    padding-top: 100px;

    .mylogin {}

    .mybtn {
      background-color: #c00000;
      color: #fff;
      border-radius: 40px;
      margin: 20px 0 10px;
    }

    .mytxt {
      font-size: 12px;
      color: #999;
    }
  }
</style>
